<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    <input type="text" name="username" placeholder="请输入用户名" id="username">
    <span id="usernameSpan"></span>
    <br>
    <input type="password" name="password" placeholder="请输入密码"> <br>
    <button>提交</button>
</form>
<!--  导入axios类库  -->
<script type="text/javascript" src="js/axios-0.18.0.js"></script>
<script type="text/javascript">
    /*
        说明：
            1.后台地址url："http://localhost:8080/registerServlet"
            2.后台需要根据key即参数名是username来获取前端提交的用户名数据
            3.后台已经存在的用户名是："岩岩"
     */
    // 1.给用户名输入框绑定一个onblur事件
    document.getElementById("username").onblur=function(){
        //2.获取输入框输入的用户名
        //  <input type="text" name="username" placeholder="请输入用户名" id="username">
        let usernameValue = this.value;
        //3.执行校验，判断usernameValue是否是空字符,trim()去掉前后空格
        if(usernameValue.trim()){
            //true发送axios异步请求
            axios.post("http://localhost:8080/registerServlet","username=" + usernameValue)
                .then(resp=>{ 
                    console.log(resp.data);
                    if(resp.data){
                        //可以注册,在span标签里用innerHTML函数写入文本
                        document.getElementById("usernameSpan").innerHTML="恭喜，该用户名可以注册";
                        //设置字体颜色为绿色
                        document.getElementById("usernameSpan").style.color="green";
                    }else{
                        //不可以注册
                        document.getElementById("usernameSpan").innerHTML="对不起，该用户名已被注册";
                        document.getElementById("usernameSpan").style.color="red";
                    }
            });
        }
    }

</script>
</body>

</html>